<template>
  <view class="fixed bg-c3">
    <view class="container">
      <view class="corner"></view>
      <view class="top">
        <view class="wrap">

          <view class="top-left item" @click="targetUrl('/pages/HomePage/Transaction/abTransaction')">
            <image src="../../../static/images/home/opt.png"></image>
            <text class="lh-h2">美元兑换阿币</text>
          </view>

          <view class="top-right item" @click="targetUrl('/pages/HomePage/Transaction/usTransaction')">
            <image src="../../../static/images/home/inform-left.png"></image>
            <text class="lh-h2"> 阿币兑换美元</text>
          </view>

        </view>
      </view>
      <view class="bottom">
        <view class="echartsIn">
          <mpvue-echarts :echarts="echarts" :onInit="lineInit" canvasId="line" />
        </view>
      </view>
    </view>
    <uniPopup :show="moreShow" type="bottom" @hidePopup="handleMore(false)">
      <view hover-class="none" class="popup-item" @click="handleUrl('/pages/HomePage/Transaction/exchangeRecord')">
        兑换记录
      </view>
      <view hover-class="none" class="popup-item border" @click="handleUrl('/pages/HomePage/Accounts/accountsHelp')">
        使用帮助
      </view>
      <view class="popup-item" @click="handleMore(false)">取消</view>
    </uniPopup>
  </view>
</template>
<script>
import * as echarts from "../../../graceUI/threeComponents/echarts/echarts.min";
import mpvueEcharts from "../../../graceUI/threeComponents/echarts/echarts";
import uniPopup from "@/components/uni-app/uni-popup.vue";

function getLineOption() {
  return {
    animation: true,
    color: ["#EB3D00"],
    legend: {
      data: ["K线"]
    },
    grid: {
      x: 35,
      x2: 10,
      y: 30,
      y2: 50
    },
    calculable: false,
    xAxis: [
      {
        type: "category",
        data: [
          "1月 00.00",
          "2月 00.00",
          "3月 00.00",
          "4月 00.00",
          "5月 00.00",
          "6月 00.00",
          "7月 00.00",
          "8月 00.00",
          "9月 00.00",
          "10月 00.00",
          "11月 00.00",
          "12月 00.00"
        ].map(function(str) {
          return str.replace(" ", "\n");
        })
      }
    ],
    yAxis: [
      {
        type: "value",
        splitLine: {
          show: true,
          lineStyle: {
            color: "#999",
            type: "dashed"
          }
        }
      }
    ],
    series: [
      {
        name: "蒸发量",
        type: "line",
        data: [16.1, 37.2, 37.3, 38, 50, 51, 66, 67]
      }
    ]
  };
}
export default {
  components: {
    mpvueEcharts,
    uniPopup
  },
  data() {
    return {
      moreShow: false,
      echarts,
      lineInit: function(canvas, width, height) {
        let lineChart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(lineChart);
        lineChart.setOption(getLineOption());
        return lineChart;
      }
    };
  },
  methods: {
    targetUrl(url){
     uni.navigateTo({
        url: url
      });
    },
    handleMore(bl) {
      this.moreShow = bl;
    },
    handleUrl(url) {
      this.moreShow = false;
      uni.navigateTo({
        url: url
      });
    }
  },
  onNavigationBarButtonTap() {
    this.moreShow = true;
  }
};
</script>

<style lang="scss" scoped>
@import "../../../styles/global/index";
.fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.container {
  position: relative;
  top: 100upx;
  left: 50%;
  transform: translateX(-50%);
  @include size(80%, 900upx);
  background: #fff;
  border-radius: 4upx;

  .corner {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 240upx;
    height: 20upx;
    background: #2081ce;
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      border-bottom: 30upx solid #fff;
      border-right: 30upx solid transparent;
    }
    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      border-bottom: 30upx solid #fff;
      border-left: 30upx solid transparent;
    }
  }
  .top {
    height: 374upx;
    @include flex-center;
    border-bottom: 16upx solid #eee;
    .wrap {
      @include size(100%, 160upx);
      display: flex;
      .top-left {
        border-right: 1px solid #eee;
        @include size(50%, 100%);
      }
      .top-right {
        width: 50%;
      }
      .item {
        @include flex-cl;
        image {
          @include size(86upx, 86upx);
        }
      }
    }
  }
}
.popup-item {
  height: 100upx;
  line-height: 100upx;
  background: #fff;
  &:active {
    background: #eee;
  }
  &:nth-child(3) {
    margin-top: 10upx;
  }
}
</style>